<template>
  <view class="page-contanier">
    <view class="head-container">
      <page-head mode="black" url="/pages/used/used-search/used-search"></page-head>
    </view>

    <view class="content-container">
      <custom-scroll-view :loadData="handleLoadData" refresherBackground="#3FD3D1" ref="listRef" @scroll='handleScroll'
        emptyText="暂无商品">
        <template v-slot="{data}">
          <view>
            <!-- 圆弧 -->
            <view class="arc-container"></view>
            <!-- 轮播图 -->
            <view class="swiper-container" v-if="carouselFigureList.length>0">
              <swiper circular indicator-dots indicator-active-color="#3FD3D1" indicator-color="#f0f0f0"
                class='swiper-view' autoplay>
                <swiper-item v-for="item in carouselFigureList" :key="item.id">
                  <image class="image-container" :src='item.img' lazy-load @click="toUsedBannerDetail(item)"
                    mode="widthFix">
                  </image>
                </swiper-item>
              </swiper>
            </view>
            <!-- 分类 -->
            <view class="classify-container">
              <view class="used-classify">
                <view class="user-classify-item" v-for="item in usedClassifyList" :key='item.familyId'
                  @click="toUsedClassifySearch(item)">
                  <image :src="item.familyImage" lazy-load>
                  </image>
                  <text>{{item.familyName}}</text>
                </view>
              </view>
            </view>

            <!-- 易加推荐 -->
            <view class="used-recommend-container">
              <view class="container">
                <text>易加推荐</text>
                <view class="right">
                  <tabs-component :data="navList" :active="navListActive" width="50%" @change="handleNavChange">
                  </tabs-component>
                </view>
              </view>
            </view>

            <view class="waterfalls-flow-container">
              <!-- https://ext.dcloud.net.cn/plugin?id=7594 -->
              <custom-waterfalls-flow :value="data.data" ref="waterfallsFlowRef" :column="2" imageKey="cover"
                :listStyle="{
                marginBottom:'32rpx',
                boxShadow: '0px 0px 2px 0px rgba(0, 0, 0, 0.1)',
                boxSizing:'border-box'
              }" imgMaxHeight="400px" @wapperClick="handleItemClick" @imageClick="handleItemClick">
                <!-- #ifdef MP-WEIXIN -->
                <view class="info-container" v-for="(item,index) in data.data" :key="index" slot="slot{{index}}">
                  <text class="title">{{item.goodsName}}</text>
                  <view class="item-info">
                    <image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
                    <text class="user-info-name">{{item.userName}}</text>
                    <text class="user-info-price">￥{{item.goodsPrice}}</text>
                  </view>
                </view>
                <!-- #endif -->

                <!-- #ifndef MP-WEIXIN -->
                <template v-slot:default="item">
                  <view class="info-container">
                    <text class="title">{{item.goodsName}}</text>
                    <view class="item-info">
                      <image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
                      <text class="user-info-name">{{item.userName}}</text>
                      <text class="user-info-price">￥{{item.goodsPrice}}</text>
                    </view>
                  </view>
                </template>
                <!-- #endif -->
              </custom-waterfalls-flow>
            </view>
          </view>
        </template>
      </custom-scroll-view>
      <!-- 悬浮按钮 -->
      <suspension-button :isBackUp='isBackUp' @backup="handleBackUp" @publish="handleJumpPublish"
        NotCertifiedText="发布商品 请先认证"></suspension-button>
    </view>
  </view>
</template>

<script>
  import {
    getUsedClassifyApi,
    carouselFigureApi,
    getSearchIntactGoodsApi
  } from '@/api/used/used.js'
  import {
    strInfo
  } from "@/api/my/userInfo.js"

  export default {
    data() {
      return {
        // 轮播图数据列表
        carouselFigureList: [],
        // 分类列表
        usedClassifyList: [],
        // 分类列表
        navListActive: 0,
        navList: [{
            text: "最新",
          },
          {
            text: "最热",
          }
        ],
        // 是否返回顶部
        isBackUp: false,
      }
    },
    onLoad() {
      this.handleOn();
      this.handleCarouselFigureList();
      this.handleGetUsedClassifyList();
      setTimeout(() => {
        this.handleNavChange(0);
      }, 300)
    },
    onUnload() {
      uni.$off('goods-update');
    },
    onShareAppMessage() {},
    onShareTimeline() {},
    methods: {
      // 分类跳转
      toUsedClassifySearch(item) {
        uni.navigateTo({
          url: `/pages/used/used-search/used-search?familyId=${item.familyId}&familyName=${item.familyName}`
        })
      },
      // 轮播图点击跳转
      toUsedBannerDetail(item) {
        console.log(item);
        // uni.navigateTo({
        //   url: '/pages/events/sign-in/sign-in?id=' + item.id
        // })
        // return;
        if (item.type == 0 || item.type == null) {
          uni.navigateTo({
            url: '/pages/used/banner-detail/banner-detail?id=' + item.id
          })
        } else if (item.type == 1) {
          uni.navigateTo({
            url: '/pages/events/sign-in/sign-in?id=' + item.id
          })
        }


      },
      // 跳转页面 携带参数
      handleNavigateTo(url = '', query = {}) {
        let arr = Object.entries(query);
        let queryStr = "?";
        for (let i in arr) {
          let [key, value] = arr[i];
          queryStr += `${key}=${value}&`;
        }
        uni.navigateTo({
          url: url + queryStr
        })
      },
      // 获取轮播图数据
      async handleCarouselFigureList() {
        const {
          data: res
        } = await carouselFigureApi()
        if (!res.success) {
          return;
        }
        this.carouselFigureList = res.data.list
      },
      //获取二手页面分类标题
      async handleGetUsedClassifyList() {
        const {
          data: res
        } = await getUsedClassifyApi()
        if (!res.success) {
          return
        }
        this.usedClassifyList = res.data.list.reverse()
      },
      //导航栏点击切换
      handleNavChange(index) {
        this.navListActive = index;
        this.$refs.listRef.handleRefresherLoad();
      },
      // 加载数据
      async handleLoadData(page) {
        page == 1 && this.$refs.waterfallsFlowRef.refresh()
        this.handleCarouselFigureList();
        let sort = this.navListActive;
        let familyId = 0;

        let {
          data: res
        } = await getSearchIntactGoodsApi(page, familyId, sort);
        let records = res.success ? res.data.records : [];
        let pages = res.success ? res.data.pages : 0;
        records = records.map((item) => {
          const imgArr = item.goodsImage.split(';');
          item.cover = imgArr ? imgArr[0] : '';
          return item;
        })
        console.log(records);
        return {
          success: res.success,
          data: records,
          pages: pages
        }
      },
      // 监听滚动事件
      handleScroll({
        scrollTop,
        oldScrollTop
      }) {
        // 上次滚动位置小于当前位置 代表正在向下滑动 反之正在向下滑动
        if (oldScrollTop <= scrollTop) {
          this.isBackUp = false;
        } else {
          this.isBackUp = true;
        }
        // 优化 当前滚动位置 小于10 返回顶部可不显示
        if (scrollTop < 10) {
          this.isBackUp = false;
        }
      },
      // 返回顶部
      handleBackUp() {
        let index = this.active;
        // 调用文章列表组件返回顶部方
        this.$refs.listRef.handleScrollToTop();
      },
      // 跳转到商品发布页
      handleJumpPublish() {
        uni.navigateTo({
          url: '/pages/used/publish-product/publish-product',
        });
      },
      // 点击商品
      handleItemClick(item) {
        uni.navigateTo({
          url: '/pages/used/product-details/product-details?id=' + item.goodsId,
        });
      },
      // 页面通讯
      handleOn() {
        uni.$on('goods-update', () => {
          console.log("change");
          this.handleNavChange(0);
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .page-contanier {
    background-color: #fff;

    .head-container {
      position: relative;
      z-index: 999;
      width: 100%;
      background: #3FD3D1;
      overflow: hidden;
    }

    .content-container {
      width: 100%;
      height: calc(100vh - var(--window-bottom) - 200rpx);

      .arc-container {
        width: 100%;
        height: 80rpx;
        background: #3FD3D1;
        border-radius: 0rpx 0rpx 50% 50%;
      }

      .swiper-container {
        padding: 0px 16px 0 16px;

        .swiper-view {
          margin-top: -45rpx;
          margin-bottom: 38rpx;
          height: 220rpx;
          width: 100%;

          .image-container {
            height: 100%;
            width: 100%;
            border-radius: 16rpx;
          }
        }
      }

      .classify-container {
        padding: 0px 16px 0 16px;

        .used-classify {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .user-classify-item {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            image {
              width: 100rpx;
              height: 100rpx;
            }

            text {
              font-size: 24rpx;
            }
          }
        }

      }


      .used-recommend-container {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 9999;
        background-color: #fff;
        padding: 24rpx 16px 24rpx 16px;

        .container {
          height: 65rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .right {
          width: 200rpx;
        }
      }

      .waterfalls-flow-container {
        padding: 32rpx;
        box-sizing: border-box;

        // max-height: 400rpx !important;

        .waterfalls-flow {
          padding: 0 4rpx;
        }

        .info-container {
          padding: 16rpx;
          box-sizing: border-box;

          .title {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .item-info {
            margin-top: 20rpx;
            display: flex;
            align-items: center;

            image {
              width: 48rpx;
              height: 48rpx;
              border-radius: 48rpx;
              flex-shrink: 0;
            }

            .user-info-name {
              font-size: 24rpx;
              font-weight: 350;
              color: #666666;
              margin-left: 16rpx;
              display: inline-block;
              width: 100%;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .user-info-price {
              flex-shrink: 0;
              font-size: 32rpx;
              font-weight: 700;
              color: #FF756A;
              text-align: right;
            }
          }

        }

      }
    }





  }
</style>